﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>运行轨迹图</title>
    <!-- Bootstrap -->
    <link href="~/lib/bootstrap/3.3.7/css/bootstrap-min.css" rel="stylesheet" />
</head>
<body>
    <div class="page-content" style="padding: 10px;">
        <h2>GPS轨迹图</h2>
        <div id="allmap"></div>
        <div style="height: 300px;overflow-y: auto;">
            <table class="table table-striped table-bordered table-hover">
                <thead>
                    <tr>
                        <th width="250px">时间</th>
                        <th width="300px">GPS位置信息</th>
                        <th>高度</th>
                        <th>速度</th>
                        <th>方向</th>
                    </tr>
                </thead>
                <tbody id="list"></tbody>
            </table>
        </div>
    </div>
    <!-- jQuery -->
    <script src="~/lib/jquery/2.1.4/jquery.js"></script>
    <!-- Bootstrap -->
    <script src="~/lib/bootstrap/3.3.7/js/bootstrap.js"></script>
    <script src="~/lib/jhrz/jhrz-utils.js"></script>
    <script src="~/lib/jhrz/jhrz-bmap.js"></script>

    <script type="text/javascript"
            src="https://api.map.baidu.com/api?v=2.0&ak=1y1ddKw01qyA02CH0f3tN9aBNIEZGDRK"></script>
    <script>
        var map = new BMap.Map("allmap", { enableMapClick: false });
        //var marker = null;
        $(function () {
            map.enableScrollWheelZoom();
            initResize();
            $("#date").val(GetToday());
            $("#startTime").val("00:00");
            $("#endTime").val("23:59");
            initControl();
            search();
        });
        function initControl() {
            $("#btnSubmit").click(function () {
                search();
            });
            $("#btnPlay").bind('click', function () {
                playGuiJi();
                $("#btnSubmit").unbind();
                $("#btnPlay").unbind();
            });
        }
        $(window).resize(function () {
            initResize();
        });
        //初始化地图大小
        function initResize() {
            $("#allmap").width($("#allmap").parent().width()-50);
            $("#allmap").height('500px');
            /* $("#allmap").height(
                    parseInt($("#allmap").parent().height()) < 500 ? "500px"
                            : $("#allmap").parent().height()); */
        }
        function search() {
            map.clearOverlays();
            $.ajax({
                type: "GET",
                url: '/YiDongYuan/Gps/GetPositionList',
                data: { phone: '@ViewBag.phone'},
                cache: false,
                dataType: "json",
                success: function (result) {
                    if (result && result.Data.length > 0) {
                        showGuiJi(result.Data)
                    } else {
                        alert('没有找到数据');
                    }
                }
            });
        }
        function showGuiJi(data, isPlay = false) {
            $("#list").empty();
            var c = new Convertor();
            var poisList = [], lastPoint = {};
            map.clearOverlays();
            for (var i = 0; i <= data.length - 1; i++) {
                if (lastPoint.longitude == data[i].longitude && lastPoint.latitude == data[i].latitude) {
                    continue;
                }
                bindTable(data[i]);
                lastPoint = data[i];
                var p = c.WGS2BD09({ lng: parseFloat(data[i].longitude), lat: parseFloat(data[i].latitude) })
                if (!p) {
                    continue;
                }
                var point = new BMap.Point(p.lng, p.lat);
                var count = Math.ceil((i + 1) / 10);
                poisList.push(point);
                if (isPlay == false) {
                    guiJiData.unshift(data[i]);
                }
            }
            bindPolyline(poisList);
            if (isPlay == false) {
                bindMarkers(poisList[0], data[0]);
                map.centerAndZoom(poisList[0], 13);
                map.setCenter(poisList[0]);
            } else {
                bindMarkers(poisList[poisList.length - 1], data[data.length - 1]);
                map.setCenter(poisList[poisList.length - 1]);
                showCopyRight(data[data.length - 1]);
            }
        }
        var guiJiData = [];
        function bindTable(data) {
            var html = '<tr>'
                + '<td>' + data.createDate + '</td>'
                + '<td>' + data.longitude + ',' + data.latitude + '</td>'
                + '<td>' + data.height + '米</td>'
                + '<td>' + data.speed + ' km/h</td>'
                + '<td>' + data.direction + ' 度</td>'
                + '</tr>';
            $("#list").append(html);
        }
        //生成标注点
        function bindMarkers(point, data) {
            var infoWindow = new BMap.InfoWindow(bindInfo(data));
            var marker = new BMap.Marker(point, {
                title: data.createDate
            });// 创建标注
            marker.addEventListener("click", function () {
                this.openInfoWindow(infoWindow);
            });
            map.addOverlay(marker);
        }
        //生成标注点显示的信息
        function bindInfo(data) {
            var content = "速度：" + data.speed + "<br />";
            content += "速度：" + data.height + "<br />";
            content += "方向：" + data.direction + "<br />";
            content += "时间：" + data.createDate + "h<br />";
            return content;
        }
        //画轨迹图
        function bindPolyline(pois) {
            /* var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
                    scale: 0.6,//图标缩放大小
                    strokeColor:'#fff',//设置矢量图标的线填充颜色
                    strokeWeight: '2',//设置线宽
                });
            var icons = new BMap.IconSequence(sy, '10', '30'); */
            // 创建polyline对象
            var polyline = new BMap.Polyline(pois, {
                enableEditing: false,//是否启用线编辑，默认为false
                enableClicking: true,//是否响应点击事件，默认为true
                //icons : [ icons ],
                strokeWeight: '8',//折线的宽度，以像素为单位
                strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1
                strokeColor: "#18a45b" //折线颜色
            });
            //var polyline = new BMap.Polyline(pois, {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5})
            map.addOverlay(polyline); //增加折线
        }
        var copyright;
        function showCopyRight(data) {
            map.removeControl(copyright);
            copyright = new BMap.CopyrightControl({ anchor: BMAP_ANCHOR_TOP_RIGHT });   //设置版权控件位置
            map.addControl(copyright); //添加版权控件
            var bs = map.getBounds();   //返回地图可视区域
            copyright.addCopyright({ id: 1, content: "<a href='#' style='font-size:20px;background:yellow'>" + data.createDate + "</a>", bounds: bs });
        }
        function hideCopyRight() {
            map.removeControl(copyright);
        }
        var points = [], index = 0, intervalId = null;
        function playGuiJi() {
            points = [];
            if (intervalId != null) {
                alert('播放中');
                return;
            }
            $("#btnSubmit").attr('disabled', 'disabled');
            $("#btnPlay").attr('disabled', 'disabled');
            $("#btnPlay").html('播放中');
            intervalId = setInterval(function () {
                if (index <= guiJiData.length - 1) {
                    points.push(guiJiData[index]);
                    showGuiJi(points, true);
                    index++;
                } else {
                    clearInterval(intervalId);
                    $("#btnSubmit").removeAttr('disabled');
                    $("#btnPlay").removeAttr('disabled');
                    $("#btnPlay").html('播放轨迹');
                    initControl();
                    intervalId = null;
                    index = 0;
                    alert('播放完成');
                    hideCopyRight();
                }
            }, 1000);
        }
    </script>
</body>
</html>